<template>  
    <div>  
      <h2>购物车</h2>  
      <ul>  
        <li v-for="item in cartItems" :key="item.id">  
          {{ item.name }} - 数量: {{ item.quantity }} - 单价: {{ item.price }}  
          <button @click="removeFromCart(item.id)">删除</button>  
        </li>  
      </ul>  
      <p>总价: {{ total }}</p>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    computed: {  
      cartItems() {  
        return this.$store.state.cartItems;  
      },  
      total() {  
        return this.$store.getters.cartTotal;  
      },  
    },  
    methods: {  
      removeFromCart(productId) {  
        this.$store.commit('removeFromCart', productId);  
      },  
    },  
  };  
  </script>